import React from 'react'
import { connect } from 'react-redux'
import { CSSTransition } from 'react-transition-group'
import * as actionCreates from './store/actionCreates'

import {
    HeaderWrapper,
    Logo,
    Nav,
    NavItem,
    NavSearch,
    SearchWrapper,
    SearchInfo,
    SearchInfoTitle,
    SearchInfoSwitch,
    SearchInfoItem,
    SearchInfoList,
    Addition,
    Button
} from './style'

class Header extends React.Component {
    constructor(props) {
        super(props)
        // this.state = {  将数据放到store 这里就不需要了
        //     focused: false
        // }

        this.getList = this.getList.bind(this)
    }
    getList() {
        const { page, list, handleChangePage, totalPage } = this.props
        const newList = list.toJS()
        const pageList = []
        if (newList.length) {
            for (let i = (page - 1) * 10; i < page * 10; i++) {
                pageList.push(
                    <SearchInfoItem key={newList[i]}>{newList[i]}</SearchInfoItem>
                )
            }
        }
        if (this.props.focused || this.props.monsein) {
            return (<SearchInfo
                onMouseEnter={this.props.handleMouseEnter}
                onMouseLeave={this.props.handleMouseLeave}
            >
                <SearchInfoTitle>
                    热门搜索
                <SearchInfoSwitch
                        onClick={() => handleChangePage(page, totalPage)}
                    >
                        <i ref={(icon) => {this.spinIcon = icon}} className="iconfont spin">&#xe603;</i>
                        换一换
                </SearchInfoSwitch>
                </SearchInfoTitle>
                <SearchInfoList>
                    {
                        pageList
                    }
                </SearchInfoList>
            </SearchInfo>)
        } else {
            return null
        }
    }
    render() {

        return (
            <div>
                <HeaderWrapper>
                    <Logo />
                    <Nav>
                        <NavItem className="left active">
                            <i className="iconfont"> &#xe6ff;</i>
                            首页
                        </NavItem>
                        <NavItem className="left">
                            <i className="iconfont">&#xe666;</i>
                            下载App
                        </NavItem>
                        <NavItem className="right">登陆</NavItem>
                        <NavItem className="right">
                            <i className="iconfont">&#xe607;</i>
                        </NavItem>
                        <SearchWrapper>
                            {/* 谁要使用动画效果就把谁包起来 */}
                            {/* 第一个参数in是true or false 代表了是’淡入’状态，还是’淡出’状态
                            timeout代表了整个的持续时间 */}
                            <CSSTransition
                                in={this.props.focused}
                                timeout={1000
                                }
                                classNames="slide"
                            >
                                <NavSearch
                                    className={this.props.focused ? 'focused' : ''}
                                    onFocus={this.props.handleInputFocus}
                                    onBlur={this.props.handleInputBlur}
                                ></NavSearch>
                            </CSSTransition>
                            <i className={this.props.focused ? 'focused iconfont zoom' : 'iconfont zoom'}>&#xe654;</i>
                            {/* 弹出的搜索框 */}
                            {this.getList()}
                        </SearchWrapper>
                    </Nav>
                    <Addition>
                        <Button className="write">
                            <i className="iconfont">&#xe608;</i>
                            写文章</Button>
                        <Button className="register">注册</Button>
                    </Addition>
                </HeaderWrapper>
            </div>
        )
    }
}

//这里是获取store 的数据
const mapStateToProps = (state) => {
    return {
        //state.focused 就是store的数据 给当前组件focused 传值
        //focused: state.header.focused  //这里header代表是将reducer 放入 一个大reducer 之后多了一层结构
        //reducer里的数据已经变成 immutable对象的数据，所以这里接收也要是 immutable 数据格式
        focused: state.getIn(['header', 'focused']),
        monsein: state.getIn(['header', 'monseIn']),
        //getIn接受一个数组， redux-immutable 实际上就是管理 reducer 的， header就是一个reducer
        list: state.getIn(['header', 'list']),
        page: state.getIn(['header', 'page']),
        totalPage: state.getIn(['header', 'totalPage'])
    }
}

//这里是将组件改变的值传给store ， 派发 action
const mapDispatchToProps = (dispatch) => {
    return {
        handleInputFocus() {
            //当获取焦点时请求数据，所以在获取焦点函数里派发action 获取axios 数据
            dispatch(actionCreates.getList())
            dispatch(actionCreates.searchFocus())
        },
        handleInputBlur() {
            dispatch(actionCreates.searchBlur())
        },
        //控制离开input框 热门搜索还在
        handleMouseEnter() {
            dispatch(actionCreates.mouseEnter())
        },
        handleMouseLeave() {
            dispatch(actionCreates.mouseLeave())
        },
        handleChangePage(page, totalPage, spin) {
            // let originAngle = spin.style.transform.replace(/[^0-9]/ig, ''); 
            // if(originAngle){
            //     originAngle = parseInt(originAngle, 10)
            // }else {
            //     originAngle = 0
            // }
            // spin.style.transform = 'rotate('+ (originAngle + 360) + 'deg)';
            // console.log(page, totalPage)
            if (page < totalPage) {
                dispatch(actionCreates.changePage(page + 1))
            } else {
                dispatch(actionCreates.changePage(1))
            }

        }
    }
}


export default connect(mapStateToProps, mapDispatchToProps)(Header)